<!--
 * @Author: 红星大哥 zhxlx@foxmail.com
 * @Date: 2024-07-21 14:31:28
 * @LastEditors: 红星大哥 zhxlx@foxmail.com
 * @LastEditTime: 2024-07-23 10:49:49
 * @FilePath: \esp8266\index2.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设备型号DM100</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html {
            font-size: calc(100% + (16 - 10) * ((100vw - 320px) / (1600 - 320)));
            /* 范围从10px到16px */
        }

        body {
            font-family: Arial, sans-serif;
            font-size: 1rem;
        }

        .container {
            display: flex;
            flex-wrap: wrap;
            min-height: 100vh;
            justify-content: center;
            /* 水平居中 */
            align-items: center;
            /* 垂直居中 */
        }

        .header,
        .footer {
            background-color: #333;
            color: white;
            padding: 20px;
            text-align: center;
            width: 100%;
        }

        .nav {
            background-color: #f1f1f1;
            padding: 20px;
            text-align: left;
            width: 25%;
        }

        .main {
            background-color: #fff;
            padding: 20px;
            text-align: center;
            width: 75%;
        }

        /* Responsive design for mobile devices */
        @media (max-width: 480px) {

            .nav,
            .main {
                width: 100%;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="header">
            <h1>环境空气质量监测</h1>
        </div>
        <div class="nav">
            <h2>主页</h2>
            <ul>
                <li><a href="#history" title="历史数据为系统采集计算的1分钟实时值">历史数据</a></li>
            </ul>
        </div>
        <div class="main">
            <h2>实时数据</h2>
            <p>This is the main content area.</p>
            <script>
                // 定义数据更新函数
                function updateData() {
                    fetch('https://api.baidu.com/data') // 替换为你的API地址
                        .then(response => response.json()) // 假设服务器返回JSON格式的数据
                        .then(data => {
                            // 更新页面上的元素
                            document.getElementById('main').textContent = JSON.stringify(data);
                        })
                        .catch(error => {
                            console.error('Error fetching data:', error);
                        });
                }
                // 调用updateData函数开始更新数据
                updateData();
                // 设置定时器，每5秒更新一次数据
                setInterval(updateData, 5000); // 5000毫秒=5秒
            </script>
        </div>
        <div class="footer">
            <h2>联系方式</h2>
            <p>天津传仪技术有限公司</p>
        </div>
    </div>

</body>

</html>